<template>
  <div class="w">

    <!-- 表单区 -->
    <Form style="padding-top: 35px;" 
      name="form" 
      ref="formRef" 
      :labelCol="{ span: 6 }" 
      :wrapperCol="{ span: 18 }" 
      :initialValues="form"
      @finish="formFinish">

      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="produceName" label="产品名称" :rules="formRules.produceName">
            <Input placeholder="请输入产品名称" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="firmId" label="厂商名称" :rules="formRules.firmId" style="position: relative;" class="firmIdPopupContainer">
            <Select placeholder="请选择厂商名称" :getPopupContainer="getFirmIdPopupContainer" style="width: 100%" allowClear>
              <Option v-for="firm in refData.firmsList" :key="firm.firmId" :value="`${firm.firmId}`" :label="firm.firmName" />
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="release" label="版本号" :rules="formRules.release">
            <Input placeholder="请输入版本号" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="remark" label="产品描述">
            <TextArea placeholder="请输入产品描述" style="width: 100%; height: 200px;" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="platform" label="适用平台" :rules="formRules.platform" style="position: relative;" class="platformPopupContainer">
            <Select type="multiple" style="width:100%" :value="platformValue" :getPopupContainer="getPlatformPopupContainer" @change="platformsOnChange" allowClear>
              <Option v-for="item in refData.platforms" :key="item.value" :value="item.value" :label="item.label" />
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem label="产品介质">
            <!-- <Input style="width: 100%" disabled /> -->
            <Upload v-model="produceMediaList" :fileType="['rpm','deb']" uploadText="选取文件" :fileSize="500" ></Upload>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem label="产品手册">
            <!-- <Input style="width: 100%" disabled /> -->
            <Upload Upload v-model="produceHandbookList" :fileType="['doc','docx','pdf']" uploadText="选取文件" :fileSize="100"></Upload>
          </FormItem>
        </Col>
      </Row>
      <Row style="margin-top: 50px;">
        <Col :span="12" :offset="6">
          <FormItem :wrapperCol="{ span: 24 }" style="text-align: center">
            <Button style="width: 100px;" type="primary" @click="formValidate">提 交</Button>
            <Button style="width: 100px; margin-left: 20px;" @click="formCancel">取 消</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>

    <!-- 提交确认框 -->
    <Modal title="提交确认" v-model="isModalVisible" @ok="formSubmit" @cancel="isModalVisible = false" centered>
      <p>即将提交产品信息，是否确认？</p>
    </Modal>

  </div>
</template>

<script>
import * as ruoyi from '@/utils/ruoyi'
import { Message } from '@uni/vue';
import Upload from '@/components/upload'
import { addProduce, updateProduce, getProduce } from "@/api/doapp/produce";

export default {
  name: "app",
  components: {
    Upload
  },
  props: {
    produceId: {
      type: Number,
      default: 0
    },
    currRow: {
      default: () => {}
    },
    refData: {
      default: () => {}
    }
  },
  data: function () {
    const validateFirmId = (rule, value) => {
      let firm = this.refData.firmsList.find(firm => firm.firmId == value);
      if (firm) return Promise.resolve();
      else return Promise.reject("请选择厂商名称");
    };
    return {
      produceMediaList: null,
      produceHandbookList: null,
      platformValue: this.currRow.platform ? this.currRow.platform.split(',') : [],
      form: {
        produceName: this.currRow.produceName,
        firmId: `${this.currRow.firmId ? this.currRow.firmId : ''}`,
        release: this.currRow.release,
        remark: this.currRow.remark,
        platform: this.currRow.platform ? this.currRow.platform.split(',') : []
      },
      formRules: {
        produceName: [
          { required: true, message: '请输入产品名称' },
        ],
        firmId: [
          // { required: true, message: '厂商名称不能为空' },
          { required: true, validator: validateFirmId },
        ],
        release: [
          { required: true, message: '请输入版本号' },
        ],
        platform: [
          { required: true, message: '请选择适用平台' },
        ]
      },
      isModalVisible: false
    }
  },
  mounted: function () {
    // console.log("mounted produceId: ", this.produceId);
    // console.log("mounted currRow: ", this.currRow);
    // console.log("mounted refData: ", this.refData);

    if(this.produceId) {
      getProduce(this.produceId).then(response => {
        // console.log(response.data);
        this.produceMediaList = response.data.produceMediaList?response.data.produceMediaList:''
        this.produceHandbookList = response.data.produceHandbookList?response.data.produceHandbookList:''
      });
    }
  },
  methods: {
    getFirmIdPopupContainer: function () {
      return document.querySelector('.firmIdPopupContainer');
    },
    getPlatformPopupContainer: function () {
      return document.querySelector('.platformPopupContainer');
    },
    platformsOnChange: function (val) {
      this.platformValue = val;
      // console.log("this.platformValue: ", this.platformValue.join(','));
      // console.log("val: ", val);
    },
    formValidate: function () {
      this.$refs.formRef.submit();
    },
    formCancel: function () {
      // this.$refs.formRef.reset();
      this.handleCancel();
    },
    formFinish: function (formValues) {
      this.form = formValues;
      // this.isModalVisible = true;
      this.formSubmit();
    },
    formSubmit: async function () {
      // 公共属性
      this.form.createBy = this.$store.state.user.name;
      this.form.createTime = ruoyi.parseTime(Date.now());
      this.form.updateBy = this.$store.state.user.name;
      this.form.updateTime = ruoyi.parseTime(Date.now());

      // 业务属性
      this.form.platform = this.platformValue.join(',');
      this.form.produceMediaList=this.produceMediaList===null ? null : this.produceMediaList.replace('/profile/upload','');
      this.form.produceHandbookList=this.produceHandbookList===null ? null : this.produceHandbookList.replace('/profile/upload','');
      // 提交表单请求
      this.isModalVisible = false;
      // console.log("this.form: ", this.form);
      if (this.produceId) {
        // 修改
        this.form.produceId = this.produceId;
        const rs = await updateProduce(this.form);
        if (rs.code !== 200) return Message.error({ text: '修改产品信息失败：' + rs.msg });
        Message.success({ text: '修改厂商信息完成' });
        this.handleCancel();

      } else {
        // 新增
        const rs = await addProduce(this.form);
        if (rs.code !== 200) return Message.error({ text: '新增产品信息失败：' + rs.msg });
        Message.success({ text: '新增厂商信息完成' });
        this.handleCancel();
      }
    },
    handleCancel: function () {
      this.$emit('handleCancel');
    }
  }
}
</script>

<style scoped>
  .w {
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }
</style>
